@extends('layouts.frontend-iframe-base')


@section('css')
    <style>
        .device{background: #fff; padding: 5px; border-radius: 5px; margin-bottom: 10px;}
        .device p{margin-left: 5px;}
    </style>
@stop

@section('content')
        <!-- Content Header (Page header) -->
<section class="content-header">
    <h1>
        我的电站
        <small>全部电站</small>
    </h1>
    <ol class="breadcrumb">
        <li><a href="#"><i class="fa fa-dashboard"></i> 首页</a></li>
        <li class="active">首页</li>
    </ol>
</section>

<!-- Main content -->
<section class="content">

    <ul class="timeline timeline-inverse">
        <!-- timeline time label -->
        <li class="time-label">
                        <span class="bg-red">
                          设备分布
                        </span>
        </li>
        <!-- /.timeline-label -->
        <!-- timeline item -->
        @foreach($groups as $g)
        <li>
            <i class="fa fa-camera bg-purple"></i>
            <div class="timeline-item">
                <span class="time"><i class="fa fa-clock-o"></i> {{$g->place}}</span>

                <h3 class="timeline-header"><a href="#">{{$g->name}}</a> </h3>

                <div class="timeline-body">
                    <div class="row">
                        @foreach($g->devices as $d)
                        <div class="col-md-2">
                            <div class="device">
                                <a href="/frontend/device/detail?id={{$d->id}}">
                                    <img src="/dist/admin/img/nbq.jpg" alt="..." class="img-responsive">
                                </a>
                                @if($d->status==1)
                                    <p>运行中： <i class="fa fa-circle text-green"></i></p>
                                @endif
                                @if($d->status==2)
                                    <p>报&nbsp;&nbsp;警： <i class="fa fa-circle text-red"></i></p>
                                @endif
                                @if($d->status==3)
                                    <p>离&nbsp;&nbsp;线： <i class="fa fa-circle text-muted"></i></p>
                                @endif
                                <p>当前功率： <span>{{$d->power}}W</span></p>
                            </div>
                        </div>
                        @endforeach
                    </div>

                </div>
            </div>
        </li>
        @endforeach
        <!-- END timeline item -->
        <li>
            <i class="fa fa-clock-o bg-gray"></i>
        </li>
    </ul>

</section>
<!-- /.content -->


@stop

@section('js')
    <script>

    </script>
@stop